Hi Dai Gei Ho~ 我是Winnie，終於今天來到了第五天，明天也要放假了！
在接下來幾篇文章也將開始進入 Vite 的主題，其中此篇文章主要會針對 Vite家庭背景 來做介紹。
Vite 主要是由 Vue之父 尤雨溪 所創建的 新型前端建構工具，其中取名為 Vite的主要原因 是因為 在法語的單字中有『快速』的意思，就如同他的開發速度一樣快 （注意是念Vite不是Vite喔XD） 。
而在現今 的 前端建開發工具中，許多主流框架也都發展出屬於自己的專案建構工具，例如：Vue 的vue-cli，React 的 create-react-app 等，其中大多都是採用 Webpack 來進行打包 的。
到這邊你可能會想 既然 Webpack這麼好用？ 為何 尤雨溪大大 要再 創建一個Vite 來 打自己的 Vue-cli啊？
事情是這樣的～在昨天的文章中 我們有提到 webpack是 採用 Module bundler 的方式進行打包，但好像忘記提到在Webpack中還有一個特點，就是他們有自己的dev-server(本地伺服器），而dev-server(本地伺服器）主要目的是在開發時可以自動檢測程式碼的變更來更新畫面，(如上圖)其運作過程也是先從 進入點(entry point)分析引入的模組所產生依賴圖 進行打包，結束後才會啟動Server，一旦程式碼修改，Webpack 的熱更新(HMR)會再次以修改的 進入點(entry point)** 進行打包，同時所有相關的依賴也都會重新被加載一次。於是這樣就會產生兩個缺點，當專案越來越大時，開發的時間難免就會變長，同時也就會造成開發體驗變慢。
就像 你知道當等待時間一變長，不知道為何你就會想躺下來。(如上圖)
而 Vite的出現 剛好就解决了上述開發速度的問題。
與Webpack的不同，Vite也有自己的dev-server，同時利用 瀏覽器支援 的 Native ESM 進行運作。
//main.html
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="w-full" id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
//main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
就如同以上程式碼與圖，其運作方式是，Vite也會在 本地 啟動一個dev-server(本地伺服器)，當瀏覽器在Html檔中讀取到<script type="module" src="/src/main.js">後，會針對路main.js中有 import 的 App.vue的模組 向伺服器發送請求，同時Vite利用內部的黑魔法 會開始將 瀏覽器看不懂的程式碼(如Vue)進行轉譯壓縮成一支Js檔。
而這樣的運作模式的好處在於 即使沒有對專案進行傳統打包，Vite也可以透過 瀏覽器 對Native ESM的支援，根據 Http的request 來載入模組進行處理，實現真正的依需求加載。讓開發速度變得更快，人生也會變得美好。
附上 瀏覽器版本 對 Native ESM 的 支援度圖，從上圖我們可以看到現在大多瀏覽器都支援了Native ESM，除了...（這圖真好用）
另外Vite對於 熱更新(HMR)運作方式是透過 webSocket/Chokidar/esbuild(後期文章會再拉出來解釋)即時編譯修改的程式碼，並透過暫存機制加載來更新後的內容。
最後總結以上為何Vite可以這麼快的原因在於，他實踐了快速冷啟動 依照需求編譯 模組熱更新的三大特點，來改善了過去傳統打包的問題。
好了以上解釋了這麼多，我們都還沒看過Vite到底多麽快速，以下動圖是之前在 Twitter上引發了熱烈討論，而其內容主要是在比較 Vite創建 React專案 與 React 的 create-react-app 建立專案時的速度差異。在下方動圖我們可以看到 右邊的Vite 只要輸入幾個指令碼 就將專案建好了，而左邊還在進行建立。(看到這，是不是覺得有點神奇！我也覺得神奇，而且從六月用到現在 已經回不去了XD)
最後，那Vite要怎麼安裝？開點小玩笑～
第一步起手式，輸入指令 npm 與yarn擇一輸入
//npm
$ npm init vite@latest
//yarn
$ yarn create vite
再來請輸入 專案名稱 及 選擇你想使用的框架。
順帶一提這邊也是我對尤雨溪大大 感到非常敬佩的地方，因為Vite不僅只是支援 Vue、原生JS，甚至是React也都支援。(有一種 雖然我們是競爭工具，但我還是接納你的感覺XD)
接著等待不用1.5秒時間，專案建立完成，依照下列步驟開啟專案 即完成
cd 你的專案名稱
yarn //初始化你的專案
yarn dev //開啟 dev server
以上是今天的文章，不曉得大家有沒有體會到Vite的快速了，如果覺得有 恭喜你與美好人生又近一步了XD，謝謝大家的閱讀，如有錯誤地方歡迎各位的指教。
Vite缺點功能是不健全，有很多功能還是回頭用webpack，
如果很複雜，最終還是用傳統CLI比較好，
而且推這麼久了，Vite星星數只有1.9k，比很多簡單chrome extension小工具star還少，
如果CLI沒有繼續維護，我想大多數人應該會回頭用React。
Vite 的星星數沒有那麼少，現在已經是是 56K 了
https://github.com/vitejs/vite
iThome鐵人賽
看影片追技術